<template>
  <div>
    <van-popup v-model="show" :style="{ width: '90%' }">
      <div class="bg_fff bkra8 powerSettingDialog">
        <div class="flvcbt pad_10">
          <p class="ct dx_16">{{ type == 1 ? '未授权剧本' : '已授权剧本' }}（{{ allList.length }}）</p>
          <van-icon name="cross" @click="close" class="dx_20" />
        </div>
        <div class="plr_10 mb10 flau" style="max-height: 300px;">
          <van-checkbox-group v-model="checkList" @change="changeScript">
            <van-checkbox :name="el.id" v-for="el in allList" :key="el.id" checked-color="#D1FB71" shape="square">{{ el.title }}</van-checkbox>
          </van-checkbox-group>
        </div>
        <div class="wb fl vc">
          <div class="wb50 flvcc dx_14 ct h44 bg_cancel" @click="close">取消</div>
          <div class="wb50 flvcc dx_14 ct h44 bg_d1" @click="confirm">确认</div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="visible" :style="{ width: '90%' }">
      <div class="bg_fff bkra8 powerSettingDialog">
        <div class="confirm_top">
          <p class="ct dx_16 center mb10">{{ type == 1 ? '授权剧本' : '取消授权' }}</p>
          <div class="center dx_14">
            <span class="color_7d">是否要</span>
            <span v-if="type == 1" class="color_15">授权</span>
            <span v-else class="color_f8">取消</span>
            <span class="">【{{storeName}}】店铺</span>
          </div>
          <p class="center dx_14 color_7d">这些剧本的授权?</p>
          <div class="plr_10 mt10 flau" style="max-height: 200px;">
            <p v-for="(item, index) in scriptList" :key="index" class="color_15 dx_14 center mb5">【{{ item }}】</p>
          </div>
        </div>
        <div class="wb fl vc">
          <div class="wb50 flvcc dx_14 ct h44 bg_cancel" @click="visible = false">取消</div>
          <div class="wb50 flvcc dx_14 ct h44 bg_d1" @click="submit">确认</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Overlay, Popup, Toast, Checkbox, CheckboxGroup, Icon  } from 'vant';
import { 
  settingAuthStore,
} from '@/api/store.js'
import { timeStampToTime } from '@/utils/util'
export default {
  components: {
    [Overlay.name]: Overlay,
    [Popup.name]: Popup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Icon.name]: Icon,
  },

  props: {
  },
  data() {
    return {
      timeStampToTime,
      show: false,
      checkList: [],
      allList: [],
      scriptList: [],
      type: '', // 1授权 2取消授权
      index: '',
      storeId: '',
      storeName: '',

      visible: false,
    };
  },

  methods: {
    initData(checkList, allList, type, index, storeId, storeName) {
      this.checkList = checkList
      this.allList = allList
      this.type = type
      this.index = index
      this.storeId = storeId
      this.storeName = storeName
      this.show = true
    },

    close () {
      this.show = false
      this.$emit('close', this.index, this.type)
    },

    changeScript() {
      if (this.type == 1) {
        this.scriptList = this.allList.filter(item => this.checkList.includes(item.id)).map(el => {
          return el.title
        })
      } else {
        this.scriptList = this.allList.filter(item => !this.checkList.includes(item.id)).map(el => {
          return el.title
        })
      }
      
    },

    confirm() {
      if (this.type == 1 && this.checkList.length == 0) {
        Toast('请选择要授权的剧本');
        return
      }
      if (this.type == 2 && this.checkList.length == this.allList.length) {
        Toast('请选择要取消授权的剧本');
        return
      }
      this.visible = true
    },

    async submit() {
      let params = {}
      if (this.type == 1) {
        params = {
          request: {
            dto: {
              storeId: this.storeId,
              agreeScriptIdList: this.checkList,
              refuseScriptIdList: []
            }
          }
        }
        try {
          const res = await settingAuthStore(params)
          if (res.errorCode === 0) {
            Toast('操作成功');
            this.visible = false
            this.show = false
            this.$emit('refresh', this.index, this.checkList, this.type)
          }
        } catch (error) {
          console.log(error)
        }
      } else {
        const list = this.allList.filter(item => !this.checkList.includes(item.id)).map(el => {
          return el.id
        })
        params = {
          request: {
            dto: {
              storeId: this.storeId,
              agreeScriptIdList: [],
              refuseScriptIdList: list
            }
          }
        }
        try {
          const res = await settingAuthStore(params)
          if (res.errorCode === 0) {
            Toast('操作成功');
            this.visible = false
            this.show = false
            this.$emit('refresh', this.index, list, this.type)
          }
        } catch (error) {
          console.log(error)
        }
      }
    }

  }
};
</script>

<style lang="less">
.powerSettingDialog {
  // width: 90%;
  // position: absolute;
  // left: 50%;
  // top: 50%;
  // transform: translate(-50%, -50%);
  .bg_d1 {
    border-bottom-right-radius: 8px;
  }
  .center {
    text-align: center;
  }
  .confirm_top {
    padding: 24px 0;
  }
}
.pad_10 {
  padding: 10px;
}
.bg_cancel {
  background: #F0F9DE;
  border-bottom-left-radius: 8px;
}
.color_15 {
  color: #15AF40;
}
.color_f8 {
  color: #F83723;
}
.color_7d {
  color: #7D7D7D;
}

</style>
